<!DOCTYPE html>
<html>
<head>
    <title>Reflection Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '22px serif';

    // Helper function to draw an arrowhead
    function drawArrowhead(ctx, x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2);
        ctx.stroke();
        ctx.restore();
    }

    // Helper function for text with subscript
    function drawTextWithSubscript(ctx, text, sub, x, y, baseFont, subFont) {
        ctx.font = baseFont;
        ctx.fillText(text, x, y);
        const textWidth = ctx.measureText(text).width;
        ctx.font = subFont;
        ctx.fillText(sub, x + textWidth, y + 5);
    }
    
    // --- Drawing starts here ---

    const cx = 200; // x-coordinate of the incidence point
    const cy = 250; // y-coordinate of the incidence point

    // 1. Coordinate System (Σ)
    const coordOriginX = 90;
    const coordOriginY = 250;
    // Y-axis
    ctx.beginPath();
    ctx.moveTo(coordOriginX, cy + 40);
    ctx.lineTo(coordOriginX, cy - 50);
    ctx.stroke();
    drawArrowhead(ctx, coordOriginX, cy - 50, -Math.PI / 2, 10);
    ctx.fillText('y', coordOriginX - 25, cy - 45);
    // X-axis
    ctx.beginPath();
    ctx.moveTo(coordOriginX, cy);
    ctx.lineTo(coordOriginX + 60, cy);
    ctx.stroke();
    drawArrowhead(ctx, coordOriginX + 60, cy, 0, 10);
    ctx.fillText('x', coordOriginX + 65, cy + 5);
    // Σ symbol
    ctx.font = '24px serif';
    ctx.fillText('Σ', coordOriginX - 25, cy + 8);
    ctx.font = '22px serif';


    // 2. Mirror
    ctx.beginPath();
    ctx.moveTo(cx, cy - 130);
    ctx.lineTo(cx, cy + 130);
    ctx.stroke();
    // Hatches for the back of the mirror
    ctx.lineWidth = 1;
    for (let i = -120; i <= 120; i += 15) {
        ctx.beginPath();
        ctx.moveTo(cx, cy + i);
        ctx.lineTo(cx + 10, cy + i - 10);
        ctx.stroke();
    }
    ctx.lineWidth = 2;


    // 3. Normal line (dashed)
    ctx.save();
    ctx.setLineDash([5, 5]);
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + 210, cy);
    ctx.stroke();
    drawArrowhead(ctx, cx + 210, cy, 0, 10);
    ctx.restore();
    ctx.fillText('v', cx + 220, cy + 8);

    // 4. Incident and Reflected Rays
    const rayAngle = 32 * Math.PI / 180;
    const rayLength = 180;
    const endX = cx + rayLength * Math.cos(rayAngle);
    
    // Incident ray (ki)
    const startYi = cy + rayLength * Math.sin(rayAngle);
    ctx.beginPath();
    ctx.moveTo(endX, startYi);
    ctx.lineTo(cx, cy);
    ctx.stroke();
    drawArrowhead(ctx, cx + 0.1 * rayLength * Math.cos(rayAngle), cy + 0.1 * rayLength * Math.sin(rayAngle), rayAngle + Math.PI, 12);

    // Reflected ray (kr)
    const endYr = cy - rayLength * Math.sin(rayAngle);
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(endX, endYr);
    ctx.stroke();
    drawArrowhead(ctx, cx + 0.9 * rayLength * Math.cos(rayAngle), cy - 0.9 * rayLength * Math.sin(rayAngle), -rayAngle, 12);

    // 5. Angle Arcs
    const arcRadius = 50;
    ctx.lineWidth = 1.5;
    // Angle θr (top)
    ctx.beginPath();
    ctx.arc(cx, cy, arcRadius, 0, -rayAngle, true);
    ctx.stroke();
    // Angle θi (bottom)
    ctx.beginPath();
    ctx.arc(cx, cy, arcRadius, 0, rayAngle, false);
    ctx.stroke();
    ctx.lineWidth = 2;

    // 6. Labels
    const baseFont = '22px serif';
    const subFont = '16px serif';

    // ki and kr
    drawTextWithSubscript(ctx, 'k', 'i', cx + 45, cy + 80, baseFont, subFont);
    drawTextWithSubscript(ctx, 'k', 'r', cx + 45, cy - 70, baseFont, subFont);
    
    // θi and θr
    drawTextWithSubscript(ctx, 'θ', 'i', cx + arcRadius + 10, cy + 20, baseFont, subFont);
    drawTextWithSubscript(ctx, 'θ', 'r', cx + arcRadius + 10, cy - 10, baseFont, subFont);

    // Frequencies (v and v')
    ctx.font = 'italic 22px serif';
    ctx.fillText("v", endX + 10, startYi);
    ctx.fillText("v'", endX + 10, endYr);

    // 7. Figure Caption
    ctx.font = '20px serif';
    ctx.fillText('Fig. 3.10.', canvas.width / 2 - 40, canvas.height - 15);

</script>
</body>
</html>